<template>
    <div class="warp-2 body-content" style="height: 100%;">
        <!--请假审批-->
        <navbar :title="$t('leave_approval')">
            <template #right>
                <router-link tag="a" class="header-icon-search-white" to="/search"></router-link>
            </template>
        </navbar>
        <div class="content-noBottom" :class="{'height-100' : total === 0}">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getFreshApproval"
                >
                    <div v-bind:class="{'height100' : total === 0}">
                        <!-- <div class="white-bg" style="padding: 15px;" v-show="total > 0">{{ total + '条请假审批' }}</div>条公告信息 -->
                        <router-link tag="div" :to="`/leaveApproval/${item.alId}`" class="announce-content invitation-content white-bg" :class="{'cur' : item.isRead === 0}" v-for="(item,index) in announceList" :key="index">
                            <div style="width: 35px;height: 35px;border-radius: 100%;background: #eeeeee;float: left;display: flex;justify-content: center;align-items: center;">
                            <span class="iconfont icon-shenpi" style="font-size: 25px;"></span>
                            </div>
                            <div class="announce-content-body">
                                <div class="word-clamp-2 title">{{item.name}}</div>
                                <div>{{ (item.alSubTime)}}</div>
                            </div>
                        </router-link>
                        <!--暂无数据-->
                        <div v-if="!isLoading && total === 0" style="height:100%;">
                            <div class="box-table" style="width:100%;height:100%;">
                                <div class="box-table-cell" style="text-align: center;">
                                    <div class="no-data">
                                        <img src="../../../static/images/no-data.png" alt=""/>
                                        <p class="color999">{{ $t("no_data") }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <common-loading :isLoading="isLoading"></common-loading>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
import CommonLoading from '@/components/common/loading';
let that;
export default {
    name: 'LeaveApproval',
    components: {CommonLoading},
    data() {
        return {
            pageNo: 1,
            pageSize: 10,
            announceList: [],
            total: 0,
            maxPageNo: 0,
            isLoading: true,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getFreshApproval('refresh');
                this.isRefresh = false;
            }, 900);
        },
        // getAnnounce(option) {
        //     this.$axios({
        //         method: 'GET',
        //         url: '/app/announce/pageJson/0',
        //         params: {
        //             pageNo: this.pageNo,
        //             sortorder: 'desc',
        //             sortname: 'msg_upd_date'
        //         }
        //     }).then(res => {
        //         if (res.data.rows && res.data.rows.length !== 0) {
        //             if (option && option === 'refresh') {
        //                 this.announceList = res.data.rows;
        //             } else {
        //                 this.announceList = [...this.announceList, ...res.data.rows];
        //             }
        //         }
        //         this.onFetching = false;
        //         this.isTop = true;
        //         this.total = res.data.total;
        //         this.isLoading = false;
        //     });
        // },
        //获取新的请假审批
        getFreshApproval(option) {
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/leave/app-list`,
                params: {
                    pageNo: this.pageNo,
                    pageSize: this.pageSize
                }
            }).then(res => {
                if (option && option === 'refresh') {
                    this.announceList = res.data.results;
                } else {
                    this.announceList = [...this.announceList, ...res.data.results];
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.maxPageNo = res.data.totalPage;
                this.pageNo++;
                if (this.announceList.length >= this.total) {
                    this.finished = true;
                }
            }).catch(() => {
                this.isLoading = false;
            });
        }
    },
    beforeCreate() {
        that = this;
    },
    mounted() {
        // this.getAnnounce();
        this.getFreshApproval('refresh');
    }
    // filters: {
    //     htmlFilter(value) {
    //         /*eslint-disable no-useless-escape*/
    //         // let imgs = value.replace(/<img[^>]*src[=\"\'\s]+[^\.]*\/([^\.]+)\.[^\"\']+[\"\']?[^>]*>/gi, '[' + that.$t('IMAGE') + ']');
    //         // let htmls = imgs.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '');
    //         // htmls = htmls.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
    //         return value;
    //     }
    // }
};
</script>

<style scoped lang="less">
    .invitation-content{
        padding: 12px 15px;
        margin: 10px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        .announce-content-body{
            margin-left: 10px;
        }
        .announce-content-body div:first-child{
            font-size: 14px;
        }
        .announce-content-body div:nth-child(2){
            margin-bottom: auto;
        }
    }
</style>
